import React, {Component} from 'react'
import {Icon, Card, Statistic, DatePicker, Timeline} from 'antd'
import moment from 'moment'
import Line from './line'
import Bar from './bar'
import './home.less'

const dateFormat = 'YYYY/MM/DD'
const {RangePicker} = DatePicker
export default class Home extends Component {
    state = {
        isVisited: true,
        color1:"red",
        color2:"green"
    }
    handleChange = (isVisited) => {
        return () => this.setState({isVisited})
    }

    handleChangeTask = () => {
        return () => this.setState({color1:this.state.color1=="red"?"green":"red",color2:this.state.color2=="red"?"green":"red"})
    }

    render() {
        const {isVisited,color1,color2} = this.state
        return (
            <div className='home'>
                <Card className="home-card" title="商品总量"
                      extra={<Icon style={{color: 'rgba(0,0,0,.45)'}} type="question-circle" title={"展示商品汇总信息"}/>} style={{width: 250}}
                      headStyle={{color: 'rgba(0,0,0,.45)'}}>
                    <Statistic value={1128163} suffix="个" style={{fontWeight: 'bolder'}}/>
                    <Statistic value={15} valueStyle={{fontSize: 15}} prefix={'周同比'}
                               suffix={
                                   <div>
                                       %<Icon style={{color: 'red', marginLeft: 10}} type="arrow-down"/>
                                   </div>}/>
                    <Statistic value={10} valueStyle={{fontSize: 15}} prefix={'日同比'}
                               suffix={<div>%<Icon style={{color: '#3f8600', marginLeft: 10}} type="arrow-up"/></div>}/>
                </Card>
                {/*<Line/>*/}
                <Card className="home-content" title={

                    <div className="home-menu">
                        <span
                            className={
                                isVisited ? "home-menu-active home-menu-visited" : 'home-menu-visited'
                            }

                            onClick={
                                this.handleChange(true)
                            }
                        >
                            访问量
                        </span>
                    <span className={isVisited ? "" : 'home-menu-active'} onClick={this.handleChange(false)}>
                        销售量
                    </span>

                    </div>
                }
                      extra={<RangePicker
                    defaultValue={[moment('2019/01/01', dateFormat), moment('2019/06/01', dateFormat)]}
                    format={dateFormat}/>}>
                    <Card className="home-table-left" title={isVisited ? '访问趋势' : '销售趋势'}
                          bodyStyle={{padding: 0, height: 275}} extra={<Icon type="reload"/>}>
                        <Bar/>
                    </Card>
                    <Card title='任务' extra={<Icon type="reload" onClick={this.handleChangeTask()}/>} className="home-table-right">
                        <Timeline>
                            <Timeline.Item color={color1}>
                                新版本迭代会
                            </Timeline.Item>
                            <Timeline.Item color={color2}>
                                完成网站设计初版
                            </Timeline.Item>
                            <Timeline.Item color={color1}>
                                <p>
                                    联调接口
                                </p>
                                <p>
                                    功能验收
                                </p>
                            </Timeline.Item>
                            <Timeline.Item>
                                <p>
                                    登录功能设计
                                </p>
                                <p>
                                    权限验证
                                </p>
                                <p>
                                    页面排版
                                </p>
                            </Timeline.Item>
                        </Timeline>
                    </Card>
                </Card>
            </div>
        )
    }
}